<template>
  <div class="v-container">
    <div class="v-header" v-if="$slots.header || header">
      <slot name="header"
        ><div class="d-flex justify-space-between">
          <div>{{ header }}</div>
          <el-link :underline="false" @click="$router.back()">
            <span class="el-icon-back"></span> 返回上一级</el-link
          >
        </div>
      </slot>
    </div>
    <div class="v-body" :class="bodyClass">
      <el-scrollbar v-if="scroll">
        <slot></slot>
      </el-scrollbar>
      <slot v-else></slot>
    </div>
    <div class="v-footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'VContainer',
  props: {
    header: String,
    bodyClass: String,
    scroll: { type: Boolean, default: true }
  }
}
</script>
<style lang="scss">
.v-container {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .v-header {
    font-size: 16px;
    // line-height: 30px;
    font-weight: 500;
    background-color: #fff;
    padding: 10px 20px;
  }
  // .v-header,
  // .v-footer {
  // }
  .v-body {
    flex: 1 0 auto;
    height: 0;
    > .el-scrollbar {
      height: 100%;
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
  }
}
</style>
